<template>
  <div>
    <a-collapse v-model:active-key="activeKeys">
      <a-collapse-panel key="1" :header="t('静态模板')">
        <ul class="grid grid-cols-3">
          <template v-for="item in allShapeNav" :key="item.title">
            <a-tooltip :title="t(item.title)">
              <li
                class="component-item"
                @click="selectNav(item)"
                @mouseenter="item.showSubItems = true"
              >
                <div class="item-desc">{{ t(item.title) }}</div>
              </li>
            </a-tooltip>
          </template>
        </ul>
      </a-collapse-panel>
      <a-collapse-panel key="2" :header="t('动态模板')">
        <ul class="grid grid-cols-3">
          <li
            v-for="(item, key) in dynamicImageList"
            :key="key"
            class="component-item"
            @click="item.event"
          >
            <div class="item-desc">{{ t(item.text) }}</div>
          </li>
        </ul>
      </a-collapse-panel>
      <a-collapse-panel key="3" :header="t('动态文本')">
        <ul class="grid grid-cols-3">
          <li
            v-for="(item, key) in filedList"
            :key="key"
            class="component-item"
            @click="createDText(item)"
          >
            <a-button type="ghost">
              {{ item.fieldName }}
            </a-button>
          </li>
        </ul>
        <div
          v-if="query.pageSize !== query.total"
          class="load-more text-center cursor-pointer"
          @click="loadMore"
        >
          {{ t('加载全部') }}
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
import { findGoodsExpandFields } from '@/api/modules/data/goods';
import {
  createDynamicBarcode,
  createDynamicQrcode,
  createDVideo,
  createDynamicImage,
  createBarcode,
  createImage,
  createQrcode,
  createText,
  createRect,
  createVideo,
  createDynamicText,
} from '../../event/shape.create';
import { IType } from '../../types/IShape';

const { t } = useI18n();
const activeKeys = ref(['1', '2', '3']);
const query = ref({
  total: 0,
  pageSize: 10,
  loadAll: true,
});

const dynamicImageList = ref([
  {
    text: '条形码',
    event() {
      createDynamicBarcode();
    },
  },
  {
    text: '二维码',
    event() {
      createDynamicQrcode();
    },
  },
  {
    text: '视频',
    event() {
      createDVideo();
    },
  },
  {
    text: '图片',
    event() {
      createDynamicImage();
    },
  },
]);
const allShapeNav = reactive([
  {
    title: '条形码',
    showIcon: false,
    type: IType.BARCODE,
    showSubItems: false,
    event() {
      createBarcode();
    },
  },
  {
    title: '图片',
    showIcon: false,
    type: IType.IMAGE,
    showSubItems: false,
    event() {
      createImage();
    },
  },
  {
    title: '二维码',
    showIcon: false,
    type: IType.QRCODE,
    showSubItems: false,
    event() {
      createQrcode();
    },
  },
  {
    title: '文本',
    showIcon: false,
    type: IType.TEXT,
    showSubItems: false,
    event() {
      createText();
    },
  },
  {
    title: '矩形',
    showIcon: false,
    type: IType.RECT,
    showSubItems: false,
    event() {
      createRect();
    },
  },
  {
    title: '视频',
    type: IType.VIDEO,
    showIcon: false,
    showSubItems: false,
    event() {
      createVideo();
    },
  },
]);

const filedList = ref([] as Array<any>);

const getList = async () => {
  const { data } = await findGoodsExpandFields(true);
  if (data.code === 200) {
    query.value.total = data.data.length;
    filedList.value = data.data;
  }
};
onMounted(async () => {
  getList();
});
/**
 * 注释:加载更多
 *
 * */
const loadMore = () => {
  query.value.pageSize = query.value.total;
  getList();
};
/**
 * 注释: 选择触发
 *
 * */
const selectNav = (item: any) => {
  item.event && item.event();
  item.showSubItems = !item.showSubItems;
};
/**
 * 注释: 创建动态字段
 *
 * */
const createDText = (item: any) => {
  createDynamicText(`{{${item.fieldName}}}`, item.fieldCode, item.fieldId, item.fieldType);
};
</script>

<style lang="scss" scoped>
li:hover {
  background: var(--hover-background);
}
.load-more {
  font-size: 12px;
  line-height: 24px;
  border: 1px solid #eee;
  margin-top: 12px;
}

.component-item {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 36px;
  white-space: wrap;
  word-wrap: break-word;
  width: 100%;
}
</style>
